<template>
    <div>
        <div v-for="(item, index) in receiveResult" :key="index">
            <div class="search-item-preview">
                <div class="title-preview">{{ item.name_zh }}：</div>
                <template v-if="item.type === 'int'">
                    <a-input v-model:value="item.value" class="a-inp-preview" />

                    <div class="exp-anddesc">
                        <a-upload
                            class="example"
                            name="file"
                            accept="image/png"
                            :show-upload-list="false"
                            :before-upload="beforeUpload1"
                            :custom-request="customRequest"
                            @change="getName(item.name)"
                        >
                            <a-button type="primary" ghost> 上传示例 </a-button>
                        </a-upload>

                        <div class="desc">{{ item.desc }}</div>
                    </div>
                </template>
                <template v-else-if="item.type === 'string'">
                    <a-input v-model:value="item.value" class="a-inp-preview" />

                    <div class="exp-anddesc">
                        <a-upload
                            class="example"
                            name="file"
                            accept="image/png"
                            :show-upload-list="false"
                            :before-upload="beforeUpload1"
                            :custom-request="customRequest"
                            @change="getName(item.name)"
                        >
                            <a-button type="primary" ghost> 上传示例 </a-button>
                        </a-upload>

                        <div class="desc">{{ item.desc }}</div>
                    </div>
                </template>
                <template v-else-if="item.type === 'pem'">
                    <a-input
                        v-model:value="receiveResult[index].value"
                        class="a-inp-preview"
                        disabled
                    />
                    <div class="exp-anddesc">
                        <a-button type="link" class="desc" @click="setVisible(item)"
                            >查看示例</a-button
                        >

                        <div class="desc">{{ item.desc }}</div>
                    </div>
                </template>
                <template v-else-if="item.type === 'exe'">
                    <a-input
                        v-model:value="receiveResult[index].value"
                        class="a-inp-preview"
                        disabled
                    />

                    <div class="exp-anddesc">
                        <a-button type="link" class="desc" @click="setVisible(item)"
                            >查看示例</a-button
                        >

                        <div class="desc">{{ item.desc }}</div>
                    </div>
                </template>
                <template v-else-if="item.type === ''">
                    <a-input
                        v-model:value="receiveResult[index].value"
                        class="a-inp-preview"
                        disabled
                    />

                    <div class="exp-anddesc">
                        <a-button type="link" class="desc" @click="setVisible(item)"
                            >查看示例</a-button
                        >

                        <div class="desc">{{ item.desc }}</div>
                    </div>
                </template>
                <template v-else-if="item.type === 'bool'">
                    <a-select
                        v-model:value="receiveResult[index].value"
                        class="a-inp-preview"
                        placeholder="请选择"
                        allow-clear
                    >
                        <a-select-option value="false">false</a-select-option>
                        <a-select-option value="true">true</a-select-option>
                    </a-select>
                    <div class="exp-anddesc">
                        <a-upload
                            class="example"
                            name="file"
                            accept="image/png"
                            :before-upload="beforeUpload1"
                            :show-upload-list="false"
                            :custom-request="customRequest"
                            @change="getName(item.name)"
                        >
                            <a-button type="primary" ghost> 上传示例 </a-button>
                        </a-upload>

                        <div class="desc">{{ item.desc }}</div>
                    </div>
                </template>

                <template v-else>
                    <div class="imgcontents">
                        <div class="imgself">
                            <!-- <img v-if="item.value" :src="item.value" alt="" /> -->
                            <a-upload
                                v-model:file-list="fileList"
                                name="avatar"
                                accept="image/*"
                                list-type="picture-card"
                                :disabled="finalname1 === ''"
                                class="avatar-uploader"
                                :show-upload-list="false"
                                :before-upload="(file) => beforeUpload(file, index)"
                                @change="getValue(item.name)"
                            >
                                <img v-if="imgUrl[index]" :src="imgUrl[index]" alt="Avatar" />
                                <img
                                    v-else-if="item.fileData && item.type !== 'png'"
                                    :src="`data:image/${item.type}+xml;base64,${item.fileData}`"
                                    alt="default"
                                />
                                <img
                                    v-else-if="item.fileData && item.type === 'png'"
                                    :src="`data:image/${item.type};base64,${item.fileData}`"
                                    alt="default"
                                />
                                <div v-else>
                                    <loading-outlined v-if="loading"></loading-outlined>
                                    <plus-outlined v-else></plus-outlined>
                                    <div class="ant-upload-text">upload</div>
                                </div>
                            </a-upload>
                        </div>
                        <div class="exp-anddesc">
                            <a-upload
                                class="example"
                                name="file"
                                accept="image/png"
                                :show-upload-list="false"
                                :custom-request="customRequest"
                                :before-upload="beforeUpload1"
                                @change="getName(item.name)"
                            >
                                <a-button type="primary" ghost> 上传示例 </a-button>
                            </a-upload>

                            <div class="desc">{{ item.desc }}</div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps, ref, watch } from 'vue';

import { LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

import service from '@/service';

const receiveResult = ref([]);

const props = defineProps({
    itemValue: {
        type: Array,
        required: true,
    },
    namesend3: {
        type: String,
        required: true,
    },
});

/*
 * 新建二次弹窗的图片上传部分;
 * const isLoading = ref(false);
 */

function getBase64(file) {
    return new Promise((resolve, reject) => {
        const render = new FileReader();

        render.onload = () => resolve(render.result);

        render.onerror = (error) => reject(error);
        render.readAsDataURL(file);
    });
}

const fileList = ref([]);
const loading = ref(false);
const imgUrl = ref([]);

// 拿到json文件里的value路径
const path11 = ref('');
const getValue = (valuePath) => {
    path11.value = valuePath;
};
const beforeUpload = (file, index) => {
    const allowUpload = receiveResult.value.map((item) => `image/${item.type}`);

    const isIco = file.type === 'image/x-icon' || /image\/\+icon/.test(file.type);

    if (!file.type.includes(allowUpload[index]) && !isIco) {
        message.error('请选择规定类型的图片进行上传');

        return false;
    }

    handleImageUpload(file, index);

    return false;
};
const imgType = ref('');
const beforeUpload1 = (file) => {
    imgType.value = file.type.split('/').pop();

    if (!file.type.includes('png')) {
        message.error('请上传png格式的图片');

        return false;
    }

    return true;
};
// 上传默认图片

const demoImage = ref([]);
const pathname = ref('');
const getName = (valuePath) => {
    pathname.value = valuePath;
};
const handleImageUpload = async (file, index) => {
    try {
        const base64Iamge = await getBase64(file);

        imgUrl.value[index] = base64Iamge;

        const formData = new FormData();

        formData.append(path11.value, file);

        const res = await service.post(
            `/warp/upload?resource_name=${finalname1.value}&type=default`,
            formData,
        );

        if (res) {
            message.success('上传成功');
        } else {
            message.error('上传失败');
        }
    } catch (error) {
        message.error('上传失败');
    }
};
const finalname1 = ref('');

watch(
    () => props.namesend3,
    (newArray) => {
        finalname1.value = newArray;
    },
    { immediate: true },
);
watch(
    () => props.itemValue,
    (newArray) => {
        receiveResult.value = newArray;
    },
    { immediate: true },
);

// 上传示例图片

const customRequest = async (file) => {
    const formData = new FormData();

    formData.append(pathname.value, file.file);

    const res = await service.post(
        `/warp/upload?resource_name=${finalname1.value}&type=demo`,
        formData,
    );

    if (res) {
        demoImage.value = res;
        message.success('上传成功');
    } else {
        message.error('上传失败');
    }
};
</script>

<style lang="scss" scoped>
@import '@/styles/uploadpadding.scss';
.desc {
    text-align: left;
    font-size: 14px;
    overflow: hidden;
    height: 40px;
}
</style>
